<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span style="margin-right: 20px;">123</span>
        <strong>   Lorem        
            ipsum 
            dol   </strong>
        <a href="#" data-log="0">呵呵</a>
        <!-- 可以自己设置属性，但是该属性没有意义，可以存储数据 -->

        <div>  nihao  </div>
    </div>

    <!-- innerHTML -->
    <!-- <script>
        var div = document.getElementsByTagName('div')[0];

        console.log(div.innerHTML, typeof(div.innerHTML));

        div.innerHTML = '123'; //覆盖已有的

        div.innerHTML += '456';
        // 改变一个元素里面的内容，不论取的还是赋值的，都是html结构

        div.innerHTML = "<span style='color: #fff;font-size: 20px;background-color: #ff4400;'>hello</span>";
    </script> -->



    <!-- innerText 老版本火狐不兼容  === textContent 老版本IE没有-->
    <!-- 一般就用innerText就好了 -->
    <!-- <script>
        var div = document.getElementsByTagName('div')[1];
        var strong = document.getElementsByTagName('strong')[0];
        console.log(strong.innerText);
        // strong.innerText = " nihao ";
        // 行盒的innerText 是行盒的内容盒的文本（发生过空白折叠），和页面展示一致 
        console.log(div.innerText);
        // 快盒的innerText 是里面的行盒或者匿名行盒的内容盒的文本

        var div1 = document.getElementsByTagName('div')[0];
        console.log(div1.innerText);
        //只取文本内容，不管里面的标签，遇见快盒就换行，形成多行字符串

        div1.innerText = '123'; // 会把所有东西给覆盖掉，在赋值时要小心

    </script> -->



    <!-- 元素节点的一些方法 -->
    <script>

        var div = document.getElementsByTagName('div')[0];

        div.setAttribute('class', 'demo'); //返回undefined
        // 给元素设置属性以及属性值
        div.setAttribute('id', 'only');

        console.log(div.getAttribute('class'),typeof(div.getAttribute('class'))); // 返回对应的属性值


        var a = document.getElementsByTagName('a')[0];

        a.onclick = function() {
            console.log(this.getAttribute('data-log'));
        }

    </script>
</body>
</html>